<template>
  <div>
    <div class="table">
      <div class="titlebox">
        <div class="text"></div>
        <div
          class="right"
          :style="{ alignItems: 'center', lineHeight: '32.5px' }"
        >
          <button
            type="primary"
            size="small"
            class="bewdao daochu"
            @click="oepnGroup()"
          >
            新增菜单分组
          </button>
          <button
            type="primary"
            size="small"
            class="bewdao daochu"
            @click="oepnItem()"
          >
            新增菜单项
          </button>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <span
              @click="shuaxin"
              :style="{ cursor: 'pointer', fontSize: '20px' }"
              ><i class="el-icon-refresh-right"></i
            ></span>
          </el-tooltip>
          <el-dropdown trigger="click" @command="command">
            <span class="el-dropdown-link">
              <el-tooltip
                class="item"
                effect="dark"
                content="密度"
                placement="top"
              >
                <span :style="{ cursor: 'pointer', fontSize: '20px' }"
                  ><i class="el-icon-d-caret"></i
                ></span>
              </el-tooltip>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="dropdown-list" command="默认"
                >默认</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-list" command="中等"
                >中等</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-list" command="紧凑"
                >紧凑</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
        row-key="menuId"
        :highlight-current-row="highlight"
        @row-click="handleCurrentChange"
        :tree-props="{ children: 'childMenus' }"
        default-expand-all
        style="width: 100%"
        height="350px"
        border
        ref="table"
        :size="iissize"
        :header-cell-style="{
          background: '#f5f5f5',
          'text-align': 'center'
        }"
      >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column align="left" prop="menuName" label="菜单名称">
          <template slot-scope="scope">
            <div style="display: flex">
              <img
                style="height: 20px; margin-right: 10px"
                :src="
                  scope.row.folder
                    ? require('@/assets/image/wjj.png')
                    : require('@/assets/image/wj.png')
                "
                alt=""
              />
              <div>{{ scope.row.menuName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="menuAction" label="菜单动作">
          <template slot-scope="scope">
            <span>{{
              actionList.find((i) => i.value === scope.row.menuAction)?.text
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="folder" label="菜单类型">
          <template slot-scope="scope">
            <span>{{ scope.row.folder ? '菜单分组' : '菜单项' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" label="操作">
          <template slot-scope="scope">
            <div class="table-cz">
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-edit"
                @click="edit(scope.row)"
              ></i>
              <i
                style="font-size: 14px; color: red; cursor: pointer"
                class="el-icon-delete"
                @click="del(scope.row)"
              ></i>
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-upload2"
                @click="move('up', scope.row)"
              ></i>
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-download"
                @click="move('down', scope.row)"
              ></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :show-close="true"
      :visible.sync="groupVisible"
      v-if="groupVisible"
      width="500px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="diaClose"
      append-to-body
      :center="true"
    >
      <el-form
        ref="groupForm"
        :rules="groupRules"
        :model="groupForm"
        label-width="110px"
      >
        <el-form-item label="分组名称" prop="groupName">
          <el-input v-model="groupForm.groupName"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top: 20px; text-align: center">
        <span slot="footer" class="dialog-footer">
          <el-button @click="diaClose">取 消</el-button>
          <el-button type="primary" @click="groupSubmit">确 定</el-button>
        </span>
      </div>
    </el-dialog>
    <el-dialog
      :show-close="true"
      :visible.sync="itemVisible"
      v-if="itemVisible"
      width="500px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="diaClose"
      append-to-body
      :center="true"
    >
      <el-form
        v-if="diaType === 'add'"
        ref="itemForm"
        :rules="itemRules"
        :model="itemForm"
        label-width="110px"
      >
        <el-form-item label="菜单动作" prop="menuAction">
          <el-select v-model="itemForm.menuAction" placeholder="">
            <el-option
              v-for="item in actionList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="itemForm.menuName"></el-input>
        </el-form-item>
        <TableUse
          v-loading="loading2"
          :data="itemNodeList"
          border
          v-if="useShow"
          max-height="300px"
          ref="table"
          :header-cell-style="{
            background: '#f5f5f5',
            'text-align': 'center'
          }"
          :tableConfig="tableConfig"
          :name="'nodeClassId'"
          @selection-change="chooseList"
        ></TableUse>
      </el-form>
      <el-form
        v-else
        ref="itemForm"
        :rules="itemRules2"
        :model="itemForm"
        label-width="110px"
      >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="itemForm.menuName"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-top: 20px; text-align: center">
        <span slot="footer" class="dialog-footer">
          <el-button @click="diaClose">取 消</el-button>
          <el-button type="primary" @click="itemSubmit">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableUse from '../../components/TableUse.vue'
import {
  addMenuGroupApi,
  addMenuItemApi,
  delMenuNodeApi,
  downMenuNodeApi,
  editMenuGroupApi,
  getMenuActionListApi,
  getNodeMenuListApi,
  getTreeChildListApi,
  upMenuNodeApi
} from '@/api/Model-all/Model-tree'
export default {
  name: 'MenuMaintain',
  components: {
    TableUse
  },
  props: {
    addType: {
      type: String,
      default: 'up'
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      diaType: 'add',
      iissize: 'medium',
      loading: false,
      loading2: false,
      tableList: [],
      actionList: [],
      itemNodeList: [],
      groupForm: {},
      itemForm: {},
      currentRow: null,
      groupRules: {
        groupName: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ]
      },
      itemRules: {
        menuAction: [
          { required: true, message: '选择菜单动作', trigger: 'change' }
        ],
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ]
      },
      itemRules2: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ]
      },
      tableConfig: [
        {
          align: 'left',
          prop: 'nodeClassName',
          label: '新增下级节点'
        }
      ],
      groupVisible: false,
      itemVisible: false
    }
  },
  computed: {
    highlight() {
      if (this.currentRow) {
        return true
      } else {
        return false
      }
    },
    useShow() {
      if (
        this.itemForm.menuAction === 'CreateDevice' ||
        this.itemForm.menuAction === 'CreateRelation'
      ) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
    useShow(val) {
      console.log(val)
      if (!val) {
        this.itemForm.classId = ''
      }
    }
  },
  created() {
    this.getMenuActionList()
  },
  mounted() {
    this.getNodeMenuList()
  },
  methods: {
    // 查询菜单动作下拉列表
    async getMenuActionList() {
      const res = await getMenuActionListApi()
      this.actionList = res.data.list
      console.log(res)
    },
    // 查询节点菜单列表
    async getNodeMenuList() {
      this.loading = true
      const res = await getNodeMenuListApi(this.data.nodeId)
      this.tableList = res.data.list
      console.log(res.data.list)
      this.loading = false
    },
    // 查询下级节点列表
    async getTreeChildList() {
      this.loading2 = true
      const res = await getTreeChildListApi(this.data.nodeId)
      this.itemNodeList = res.data.list
      console.log(this.itemNodeList)
      this.loading2 = false
    },
    command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    async del(item) {
      this.$confirm('请确认是否删除该菜单节点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await delMenuNodeApi(item.menuId)
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message,
              duration: 2000
            })
            this.getNodeMenuList()
          } else {
            this.$message({
              type: 'error',
              message: res.message,
              duration: 2000
            })
          }
        })
        .catch((action) => {
          if (action === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除',
              duration: 2000
            })
          }
        })
    },
    // 菜单分组新增弹窗
    oepnGroup(type) {
      this.diaType = 'add'
      this.groupVisible = true
    },
    // 菜单项新增弹窗
    oepnItem(type) {
      this.diaType = 'add'
      this.getTreeChildList()
      this.$set(this.itemForm, 'menuAction', this.actionList[0].value)
      this.itemVisible = true
      if (this.currentRow?.folder) {
        this.itemForm.parentMenuId = this.currentRow.menuId
      }
      console.log(this.itemForm)
    },
    shuaxin() {
      this.getNodeMenuList()
      this.$message({
        type: 'success',
        message: '列表刷新成功',
        duration: 2000
      })
    },
    // 分组 提交
    async groupSubmit() {
      await this.$refs.groupForm.validate()
      const res =
        this.diaType === 'add'
          ? await addMenuGroupApi({
              nodeId: this.data.nodeId,
              ...this.groupForm
            })
          : await editMenuGroupApi({
              menuId: this.groupForm.menuId,
              menuName: this.groupForm.groupName
            })
      console.log(res)
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 2000
        })
        this.getNodeMenuList()
        this.diaClose()
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 2000
        })
      }
    },
    // 菜单项提交
    async itemSubmit() {
      await this.$refs.itemForm.validate()
      const res =
        this.diaType === 'add'
          ? await addMenuItemApi({
              nodeId: this.data.nodeId,
              ...this.itemForm
            })
          : await editMenuGroupApi({
              menuId: this.itemForm.menuId,
              menuName: this.itemForm.menuName
            })
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 2000
        })
        this.getNodeMenuList()
        this.diaClose()
      } else {
        this.$message({
          type: 'error',
          message: res.message,
          duration: 2000
        })
      }
    },
    chooseList(arr) {
      console.log(arr)
      this.itemForm.classId = arr
    },
    edit(item) {
      this.diaType = 'edit'
      console.log(item)
      if (item.folder) {
        this.$set(this.groupForm, 'menuId', item.menuId)
        this.$set(this.groupForm, 'groupName', item.menuName)
        this.groupVisible = true
      } else {
        this.$set(this.itemForm, 'menuId', item.menuId)
        this.$set(this.itemForm, 'menuName', item.menuName)
        this.itemVisible = true
      }
    },
    // 移动
    async move(type, item) {
      this.$confirm('此操作将移动该菜单节点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res =
            type === 'up'
              ? await upMenuNodeApi(item.menuId)
              : await downMenuNodeApi(item.menuId)
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message,
              duration: 2000
            })
            this.getNodeMenuList()
          } else {
            this.$message({
              type: 'error',
              message: res.message,
              duration: 2000
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移动'
          })
        })
    },
    // 列表单选
    handleCurrentChange(row) {
      console.log(row)
      if (this.currentRow == row) {
        this.currentRow = null
      } else {
        this.currentRow = row
      }
    },
    diaClose() {
      this.groupVisible = false
      this.itemVisible = false
      this.groupForm = {}
      this.itemForm = {}
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .cell {
  display: flex;
}
::v-deep .el-select {
  width: 100%;
}
.table-cz {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.button {
  width: 63px;
  height: 32px;
  margin-right: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.top {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 20px;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    .group-select {
      width: 200px;
      margin-right: 10px;
    }
    .group-add {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      border-radius: 5px;
      width: 25px;
      height: 25px;
      margin-right: 20px;
    }
  }
}
.table {
  .titlebox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .text {
      font-size: 16px;
    }
    .right {
      align-items: center;
      i {
        margin-left: 10px;
      }
      .bewdao {
        width: 100px;
        height: 32px;
        margin-right: 20px;
      }
      .daochu {
        background-color: #1890ff;
        color: #fff;
        border: none;
        border-radius: 3px;
      }
    }
  }
}
</style>
